<template>
  <div class="box">
    <div class="title">AI智能脚型分类应用试验结果统计</div>
    <div class="content">
      <div v-for="(item, index) in data" :key="index" class="content-item">
        <div class="item-title">
          <div>{{ item.name }}</div>
        </div>

        <div class="item-info">
          <div style="color: #529b2e; margin-bottom: 20px">
            识别正确：{{ item.right }}次
          </div>
          <div style="color: #c45656; margin-bottom: 20px">
            识别错误：{{ item.wrong }}次
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const data = reactive([
  {
    name: "第1组",
    right: "15",
    wrong: "4",
  },
  {
    name: "第2组",
    right: "3",
    wrong: "0",
  },
  {
    name: "第3组",
    right: "2",
    wrong: "2",
  },
  {
    name: "第4组",
    right: "5",
    wrong: "1",
  },
  {
    name: "第5组",
    right: "4",
    wrong: "2",
  },
  {
    name: "第6组",
    right: "4",
    wrong: "0",
  },
]);
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
}

.title {
  align-self: center;
  font-size: 50px;
  color: aliceblue;
  font-weight: 900;
}

.content {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 20px; /* 设置子元素之间的间距 */
}

.content-item {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  background-color: rgb(231, 231, 231);
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px black;
}
.item-title {
  /* margin: 10px 10px; */
  flex-basis: 25%;
  background: #ffd04b;
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  line-height: 75px;
}

.item-info {
  margin-bottom: 60px;
  align-self: center;
  margin: 40px 10px;
  font-size: 30px;
  font-weight: bolder;
}
</style>